<template>
  <div class="mapBox">
    <div id="map" ref="rootmap">
      <el-button-group v-show="isShowTbBtns" class="tbBtns">
        <el-button type="primary" size="small" @click="addZD()">新增</el-button>
        <el-button type="primary" size="small" @click="removeZD()"
          >删除</el-button
        >
      </el-button-group>

      <mapTab />
      <el-button
        type="primary"
        class="toggleTCGL"
        size="small"
        @click="isShowTCGL = isShowTCGL == true ? false : true"
        >图层管理</el-button
      >
      <div v-show="isShowTCGL" class="tcglBox">
        <tcgl ref="tcglRef"></tcgl>
      </div>
      <div id="mouse-position"></div>
    </div>
  </div>
</template>
<script>
import { LAYERMANAGER, NULAYER } from '@/utils/mapBase'
import mapTab from './mapTab'
import tcgl from './tcgl'
export default {
  name: 'OlMap',
  components: {
    mapTab,
    tcgl,
  },
  data() {
    return {
      isShowTCGL: true, //是否显示图层管理
      layerManager: null,
      mapObject: null,
      lightVector: null, //高亮图层
      ylVector: null, //宗地图层
      ystbCenterVector: null, //村行政区内所有疑似图斑中心点
      activeFeature: null, //当前操作feature
      activityTool: 'default',
      isShowTbBtns: false, //显示图斑操作按钮
      userInfo: {},
      coor: [],
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
  },
  mounted() {
    this.initLayerManager()
  },
  computed: {
    getMapType() {
      return this.$store.getters.mapType //需要监听的数据
    },
  },
  watch: {
    getMapType(newVal, oldVal) {
      //监听切换底图
      if (this.layerManager) {
        this.layerManager.changeBaseMap(newVal)
      }
    },
  },
  methods: {
    initLayerManager() {
      this.layerManager = new LAYERMANAGER()
      this.mapObject = this.layerManager.mapObject
      var that = this
      that.lightVector = that.layerManager.lightVector
      this.initLayers()
      this.listeningMapClick()
    },
    initLayers() {
      var nlayers = this.layerManager.nuLayers

      var jcsjArr = []
      var xianjie = new NULAYER(nlayers.xianjie)
      this.mapObject.addLayer(xianjie)
      // nlayers.xianjie.isShow = true
      jcsjArr.push(nlayers.xianjie)

      var zysjArr = []
      // this.ystbCenterVector = new NULAYER(nlayers.ystbCenterVector)
      // this.mapObject.addLayer(this.ystbCenterVector)
      // nlayers.ystbCenterVector.isShow = true
      // zysjArr.push(nlayers.ystbCenterVector)

      var zxsjArr = []
      var SJZFW = new NULAYER(nlayers.SJZFW)
      this.mapObject.addLayer(SJZFW)
      zxsjArr.push(nlayers.SJZFW)
      var SJZZD = new NULAYER(nlayers.SJZZD)
      this.mapObject.addLayer(SJZZD)
      zxsjArr.push(nlayers.SJZZD)
      var SJZYS = new NULAYER(nlayers.SJZYS)
      this.mapObject.addLayer(SJZYS)
      zxsjArr.push(nlayers.SJZYS)

      var tcObj = {
        jcsjArr: jcsjArr,
        zysjArr: zysjArr,
        zxsjArr: zxsjArr,
      }

      //加入到图层管理
      this.$refs.tcglRef.getTCArr(tcObj)
    },
    listeningMapClick() {
      //监听地图单击事件
      var that = this
      var mapObject = this.mapObject
      mapObject.on('singleclick', (e) => {
        // console.log(' 没有要素被选中.')
        that.activeFeature = null
        var clickRes = []
        var isclickGL = false
        that.lightVector.getSource().clear()

        //如果是新增点
        if (that.activityTool == 'addPoint') {
          that.lightVector.getSource().clear()
          //获取当前点击位置的坐标
          var coor = e.coordinate

          //然后执行新增点
          that.addPointByCoor(coor)
          //然后重置activityTool
          that.activityTool = 'default'
          return false
        }

        //如果不是新增 默认点击选中要素
        mapObject.forEachFeatureAtPixel(
          e.pixel,
          (feature, layer) => {
            // console.log(' 一个要素被选中了!')
            if (!feature || !layer) {
              return false
            }
            var layerName = layer.get('name')
            console.log('当前点击图层：', layerName)
            if (layerName == '高亮图层') {
              //点击了高亮图层
              isclickGL = true
            } else if (layerName == '宗地') {
              //选择了图层
              clickRes.push({
                layerName: layerName,
                feature: feature,
              })
            }
          },
          {
            // hitTolerance: 20,
            hitTolerance: 1,
          }
        )

        //如果点击了高亮图层就将高亮图层清空
        if (isclickGL || clickRes.length == 0) {
          isclickGL = false
          return false
        }

        console.log(clickRes)
        if (clickRes.length == 1) {
          var layerName = clickRes[0].layerName
          var feature = clickRes[0].feature

          if (layerName == '图斑中心点') {
            that.activeFeature = feature
            that.currentDCTBFeature = feature
            // var keys = that.activeFeature.getKeys()
            // keys.forEach(function (v, i) {
            //   that.activityData[v] = that.activeFeature.get(v)
            // })

            that.lightVector.getSource().addFeature(feature)
          }
        } else if (clickRes.length > 1) {
          this.$message.warning('当前点击点附近有多个元素')
          // console.log(JSON.stringify(clickRes))
        }
      })
    },
    //点击新增图斑按钮
    addZD() {
      var that = this
      that.activityTool = 'addPoint'
      that.$message('单击地图新增点')
      //改变activityTool 然后单击地图
    },
    //获取到地图单击位置坐标后新增一个点
    addPointByCoor(coor) {
      var that = this
      var pointF = that.layerManager.getPointFeatureByXY(coor[0], coor[1])
      pointF.set('bsm', '新增点123')
      this.coor = coor
      this.$emit('gCoor', coor)
      // console.log(this.coor)
      that.ystbCenterVector.getSource().addFeature(pointF)
    },
    //删除图斑
    removeZD() {
      var that = this
      if (!that.activeFeature) {
        this.$message('请先选择要删除的')
        return false
      }
      that.ystbCenterVector.getSource().removeFeature(that.activeFeature)
      that.lightVector.getSource().clear()
      that.activeFeature = null
    },
    toggleLayerById(layerId, visible) {
      console.log(layerId, visible)
      var layer = this.layerManager.getLayerByLayerId(layerId)
      try {
        layer.setVisible(visible)
      } catch (error) {
        console.log(error)
      }
    },
    //显示疑似图斑中心点
    showYSTBCenters(cArr, isFit) {
      cArr.forEach((v, i) => {
        var data = v
        var x = parseFloat(data.GEOM.split(' ')[0])
        var y = parseFloat(data.GEOM.split(' ')[1])
        var pFeature = this.layerManager.getPointFeatureByXY(x, y)
        pFeature.set('gName', data.VILLAGE)
        pFeature.set('bsm', data.BSM)
        pFeature.set('gCode', data.GB_CODE)
        pFeature.set('id', data.G_ID)
        pFeature.set('pType', 'ystbCenter')
        this.ystbCenterVector.getSource().addFeature(pFeature)
      })
      if (isFit) {
        this.layerManager.fitByExtent(
          this.ystbCenterVector.getSource().getExtent()
        )
      }
    },
    fitExtentByType() {
      this.layerManager.fitByExtent(
        this.ystbCenterVector.getSource().getExtent()
      )
    },
  },
}
</script>

<style>
.mapBox {
  height: calc(100vh - 50px);
  width: 100%;
}
#map {
  position: relative;
  height: 100%;
  width: 100%;
}

#mouse-position {
  text-align: center;
  position: absolute;
  right: 3px;
  bottom: 5px;
  width: 200px;
  height: 20px;
  /* 将z-index设置为显示在地图上层 */
  z-index: 2000;
}
/* 显示鼠标信息的自定义样式设置 */
.custom-mouse-position {
  color: black;
  font-size: 16px;
  font-family: 'Arial';
}

.toggleTCGL {
  position: absolute;
  top: 15px;
  left: 50px;
  z-index: 11;
}

.tcglBox {
  position: absolute;
  left: 50px;
  top: 48px;
  z-index: 12;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
  width: 176px;
}

.tbBtns {
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: 11;
}
.mapTab {
  float: right;
}
</style>